<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>滚动条合成线程里的</title>
  </head>

  <body>
    <button>主线程延迟3s</button>
    <br /><br />
    <button id="test">能不能点击</button>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Id accusantium eligendi debitis magni sed temporibus
      exercitationem. Voluptatem quisquam dolore corrupti ut perspiciatis consequuntur cumque adipisci! Nihil facilis
      iusto expedita quod.
    </p>
    <p>
      Corrupti, libero adipisci aut pariatur commodi quidem qui reprehenderit ipsam eum eaque consequuntur facilis eos
      cum quos vero earum iure, impedit, rerum aliquam non nulla! Expedita dolorem sed doloribus odio?
    </p>
    <p>
      Nam, cupiditate dignissimos inventore tenetur minima voluptate fugit nesciunt ea aut consequatur ducimus debitis
      doloremque quidem quis iure tempora, fugiat numquam id vero est delectus ipsa culpa officiis! Sint, animi?
    </p>
    <p>
      Eum vero dolorum accusantium, reiciendis quisquam placeat aliquid suscipit debitis distinctio laudantium sequi
      minima inventore possimus dignissimos accusamus ex iure. Placeat quisquam quasi debitis alias, totam ipsam vero
      dolor dolores?
    </p>
    <p>
      Consectetur fugit ipsam mollitia quo voluptatum animi nesciunt ipsa doloribus vitae. Debitis amet ratione ut
      dicta, quisquam facere obcaecati sed consequatur exercitationem earum adipisci nam explicabo. Eveniet obcaecati
      mollitia animi!
    </p>
    <p>
      Officiis quisquam nulla reiciendis natus molestiae harum provident eum, earum rerum deserunt incidunt laborum a
      maiores ea nisi. Fugiat quidem facere vero rem impedit architecto tempore fuga porro error saepe!
    </p>
    <p>
      In cupiditate nam distinctio sapiente ipsam perspiciatis quasi? Fuga architecto ipsa ullam officia necessitatibus
      facere id debitis similique impedit magnam maxime quia eum repellat corrupti, excepturi in neque quaerat eaque.
    </p>
    <p>
      Consequatur nisi velit suscipit enim, nam harum iure rem, maiores quos tempore similique vero excepturi eos et?
      Porro voluptatum, et saepe provident suscipit possimus, expedita dolores aut fugit aperiam optio?
    </p>
    <p>
      Asperiores necessitatibus odio, debitis aliquid quo nihil pariatur nulla dolorem, maxime soluta iste quam porro
      doloribus provident! Atque praesentium placeat in ea consectetur maiores id vitae temporibus ratione. Enim, sint?
    </p>
    <p>
      Placeat obcaecati voluptatem impedit necessitatibus omnis consectetur molestias facere nemo quae ipsum! Inventore
      quis esse voluptatem itaque corrupti consequuntur dolorum odio consequatur recusandae! Sunt molestias incidunt
      nisi ex ullam. Excepturi!
    </p>
    <p>
      Sapiente sequi quas dolor nisi optio ut eum magni maxime unde repudiandae consectetur fuga, vero odio, temporibus
      dolores exercitationem odit in, ipsam praesentium! Eaque, dicta porro omnis tenetur dolore deserunt!
    </p>
    <p>
      Nemo maxime exercitationem minus, accusamus enim nobis? Expedita ducimus hic amet molestiae odio consectetur
      dolorem esse? A sit quod nemo, voluptatibus sint sapiente, rerum voluptatum ut amet esse doloremque ab!
    </p>
    <p>
      Nihil ipsa modi tempora commodi, iste et odio quam exercitationem. Asperiores, ullam. Dolor dolorem aliquid cumque
      sint, natus eligendi illo harum expedita omnis porro distinctio hic beatae dolores molestiae ipsum!
    </p>
    <p>
      Quidem inventore ea eveniet labore placeat sunt hic ex veniam iure eius! Error id nisi ipsa, aut quas laborum
      itaque, vel vero blanditiis distinctio, natus sapiente dolor praesentium possimus odio?
    </p>
    <p>
      Laboriosam, molestias reiciendis sit quam sunt sed consectetur quod assumenda! Numquam, provident cum, aliquid
      amet optio corporis quaerat laudantium alias officiis possimus neque officia doloremque, expedita iusto sapiente
      dolor culpa!
    </p>
    <p>
      Minima, totam nihil magni provident beatae perferendis rem distinctio molestiae doloremque quibusdam quas
      reiciendis commodi eveniet labore temporibus autem blanditiis ducimus reprehenderit eum natus maxime odit quam ex
      dolores. Velit.
    </p>
    <p>
      Ut ullam nihil odio modi ipsa, facilis laborum quod. Reprehenderit porro, libero atque, nam, adipisci alias
      perferendis placeat doloribus accusantium nostrum aliquam? A, odit enim dolore veniam corrupti debitis explicabo.
    </p>
    <p>
      At earum facilis aliquam, molestias neque est deleniti, assumenda voluptas nobis temporibus laudantium distinctio
      hic beatae eligendi quis cum in, ipsum magni quisquam possimus suscipit explicabo? Corporis illo illum molestiae.
    </p>
    <p>
      Sequi voluptatum eum cumque in sapiente quos non corporis, eveniet eligendi ex. Ratione cupiditate, aliquam
      veniam, esse sequi maiores recusandae dolores expedita, libero facilis natus hic numquam. Unde, minima magni?
    </p>
    <p>
      Nesciunt iure atque ratione itaque, exercitationem vero quia distinctio quod perspiciatis mollitia, esse debitis
      consequuntur molestiae autem maxime rerum est molestias a? Dolorum sequi nobis nostrum, reprehenderit sit facere
      cum?
    </p>
  </body>

  <script>
    const btn = document.querySelector("button");

    function delay(times) {
      const last = Date.now();
      while (Date.now() - last < times) {}
      console.log(`延迟${times / 1000}s`);
    }

    btn.onclick = function () {
      delay(3000);
    };

    const test = document.getElementById("test");
    test.onclick = function () {
      console.log("能否点击");
    };
  </script>
</html>
